<template>
  <div>
    <el-dialog
        title="工序汇报"
        width="1100px"
        @open="open"
        :visible.sync="show"
        :before-close="closeForm"
        append-to-body
    >
      <!-- 表格容器，固定高度可滚动 -->
      <div class="scroll-table">
        <el-table :data="dataList" border style="width: 100%;">
          <el-table-column label="序号" type="index" width="60" />
<!--          <el-table-column prop="billNo" label="单据编号" width="100" />-->
          <el-table-column prop="erpBillNo" label="工序单号" width="100" />
          <el-table-column prop="specification" label="件号" width="100" />

          <!-- ✅ 合格数量 -->
          <el-table-column label="合格数量">
            <template #default="{ row }">
              <el-input
                  v-model="row.quaQty"
                  @input="val => row.quaQty = limitDecimal(val)"
                  type="text"
                  style="width: 150px;"
              />
            </template>
          </el-table-column>

          <!-- ✅ 报废数量 -->
          <el-table-column label="报废数量">
            <template #default="{ row }">
              <el-input
                  v-model="row.failQty"
                  @input="val => row.failQty = limitDecimal(val)"
                  type="text"
                  style="width: 150px;"
              />
            </template>
          </el-table-column>

          <!-- ✅ 外协不良品退料 -->
          <el-table-column label="外协不良品退料">
            <template #default="{ row }">
              <el-input
                  v-model="row.outFailQty"
                  @input="val => row.outFailQty = limitDecimal(val)"
                  type="text"
                  style="width: 150px;"
              />
            </template>
          </el-table-column>

          <!-- ✅ 返修数量 -->
          <el-table-column label="返修数量">
            <template #default="{ row }">
              <el-input
                  v-model="row.returnQty"
                  @input="val => row.returnQty = limitDecimal(val)"
                  type="text"
                  style="width: 150px;"
              />
            </template>
          </el-table-column>

          <!-- ✅ 自动计算完工数量 -->
          <el-table-column label="完工数量">
            <template #default="{ row }">
              <el-input

                  :value="computeEndQty(row)"
                  readonly
                  type="text"
                  style="width: 150px;"
              />
            </template>
          </el-table-column>
        </el-table>
      </div>

      <!-- 操作按钮 -->
      <div style="text-align: right; margin-top: 20px;">
        <el-button size="mini" @click="closeForm">取消</el-button>
        <el-button type="primary" size="mini" @click="submitForm">保存</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getReportByOperNo,createReportPackage } from '@/api/app/sfcoptrpt';

export default {
  name: 'proplandetail',
  props: {
    show: {
      type: Boolean,
      default: true
    },
    size: {
      type: String,
      default: 'mini'
    },
    info: {
      type: Object
    }
  },
  data() {
    return {
      dataList: []
    };
  },
  methods: {
    open() {
      getReportByOperNo({ billNoList: this.info.billNoList }).then(res => {
        this.dataList = res.data.dataList || [];
      });
    },
    closeForm() {
      this.$emit('update:show', false);
    },
    limitDecimal(val) {
      if (typeof val !== 'string') val = String(val);
      val = val.replace(/[^\d.]/g, ''); // 去除非数字和小数点
      val = val.replace(/\.{2,}/g, '.'); // 多个点只保留一个
      val = val.replace(/^0+(\d)/, '$1'); // 前导0
      val = val.replace(/^(\.)/, '0.'); // 点开头补0
      val = val.replace(/^(\d+)\.(\d{0,2}).*$/, '$1.$2'); // 保留两位小数
      return val;
    },
    computeEndQty(row) {
      const toNum = v => Number(v || 0);
      return (
          toNum(row.quaQty) +
          toNum(row.failQty) +
          toNum(row.outFailQty) +
          toNum(row.returnQty)
      ).toFixed(2);
    },
     submitForm() {
      this.$confirm('是否保存',{
        confirmButtonText:'确定',
        cancelButtonText:'取消',
        type:'success'
      }).then(() =>{
        const payload = this.dataList.map(row => {
          const safeNum = v => Number(v || 0);
          return {
            ...row,
            endQty: (
                safeNum(row.quaQty) +
                safeNum(row.failQty) +
                safeNum(row.outFailQty) +
                safeNum(row.returnQty)
            ).toFixed(2)
          };
        });
        createReportPackage({dataList : payload}).then(res =>{
          if (res.data){
            this.$message({
              type: 'success',
              message: '保存成功!'
            });
            this.$emit('refresh_list'); // ✅ 通知父组件刷新
            this.closeForm()
          }
        })
      })
    }
  }
};
</script>

<style lang="scss">
@import '@/assets/scss/common.scss';

/* 固定高度的表格区域 */
.scroll-table {
  height: 500px;
  overflow-y: auto;
  margin-bottom: 10px;
}

/* 表格样式美化 */
::v-deep .el-table .el-table__row {
  height: 60px !important;
}
::v-deep .el-table .cell {
  line-height: 60px;
  vertical-align: middle;
  font-size: 16px;
}

/* 输入框样式 */
::v-deep .el-input__inner {
  height: 40px !important;
  line-height: 40px !important;
  font-size: 16px;
  text-align: center;
}
</style>
